import React from 'react'
import { ShoppingCart, Trash2, Plus, Minus } from 'lucide-react'
import { motion } from 'framer-motion'
import { cn } from '../utils/cn'

const Cart: React.FC = () => {
  // 模拟购物车数据
  const cartItems = [
    {
      id: '1',
      bookId: '1',
      title: '小熊宝宝绘本',
      author: '佐佐木洋子',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20little%20bear%20character%20in%20warm%20children%20book%20illustration%20style%20soft%20colors%20gentle%20lighting&image_size=portrait_4_3',
      price: 28.8,
      quantity: 1,
      ageRange: [0, 3],
      pages: 24
    },
    {
      id: '2',
      bookId: '3',
      title: '我爸爸',
      author: '安东尼·布朗',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=father%20and%20child%20illustration%20in%20children%20book%20style%20warm%20family%20moment%20soft%20colors&image_size=portrait_4_3',
      price: 32.0,
      quantity: 2,
      ageRange: [2, 5],
      pages: 28
    },
    {
      id: '3',
      bookId: '4',
      title: '好饿的毛毛虫',
      author: '艾瑞·卡尔',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20caterpillar%20in%20children%20book%20illustration%20style%20bright%20colors%20whimsical%20art&image_size=portrait_4_3',
      price: 35.0,
      quantity: 1,
      ageRange: [1, 4],
      pages: 26
    }
  ]

  const [items, setItems] = React.useState(cartItems)

  const updateQuantity = (id: string, newQuantity: number) => {
    if (newQuantity <= 0) {
      removeItem(id)
      return
    }
    setItems(items.map(item => 
      item.id === id ? { ...item, quantity: newQuantity } : item
    ))
  }

  const removeItem = (id: string) => {
    setItems(items.filter(item => item.id !== id))
  }

  const subtotal = items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
  const shipping = subtotal >= 99 ? 0 : 8
  const total = subtotal + shipping

  const CartItem: React.FC<{ item: any }> = ({ item }: { item: any }) => {
    return (
      <motion.div
        layout
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300"
      >
        <div className="flex space-x-4">
          {/* 书籍封面 */}
          <div className="w-20 h-28 rounded-xl overflow-hidden flex-shrink-0">
            <img
              src={item.cover}
              alt={item.title}
              className="w-full h-full object-cover"
            />
          </div>

          {/* 书籍信息 */}
          <div className="flex-1 min-w-0">
            <h3 className="text-lg font-bold text-gray-800 mb-1">{item.title}</h3>
            <p className="text-gray-600 text-sm mb-2">作者：{item.author}</p>
            <div className="flex items-center space-x-4 text-sm text-gray-500 mb-3">
              <span>{item.ageRange[0]}-{item.ageRange[1]}岁</span>
              <span>{item.pages}页</span>
              <span className="text-primary-600 font-medium">¥{item.price}</span>
            </div>

            {/* 数量控制 */}
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <button
                  onClick={() => updateQuantity(item.id, item.quantity - 1)}
                  className="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors"
                >
                  <Minus className="w-4 h-4" />
                </button>
                <span className="font-medium text-gray-800 min-w-[2rem] text-center">
                  {item.quantity}
                </span>
                <button
                  onClick={() => updateQuantity(item.id, item.quantity + 1)}
                  className="w-8 h-8 rounded-full bg-primary-100 hover:bg-primary-200 flex items-center justify-center transition-colors"
                >
                  <Plus className="w-4 h-4 text-primary-600" />
                </button>
              </div>

              <div className="flex items-center space-x-3">
                <span className="text-lg font-bold text-primary-600">
                  ¥{(item.price * item.quantity).toFixed(1)}
                </span>
                <button
                  onClick={() => removeItem(item.id)}
                  className="w-8 h-8 rounded-full bg-red-100 hover:bg-red-200 flex items-center justify-center transition-colors"
                >
                  <Trash2 className="w-4 h-4 text-red-600" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    )
  }

  const EmptyCart: React.FC = () => {
    return (
      <div className="bg-white rounded-3xl p-12 text-center shadow-xl">
        <div className="w-24 h-24 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <ShoppingCart className="w-12 h-12 text-primary-600" />
        </div>
        <h3 className="text-xl font-bold text-gray-800 mb-2">购物车是空的</h3>
        <p className="text-gray-600 mb-6">快去挑选一些喜欢的绘本吧！</p>
        <button className="px-6 py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-2xl hover:from-primary-600 hover:to-primary-700 transition-all duration-200 font-medium">
          去逛逛
        </button>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-cream-50 to-sky-50">
      <div className="container mx-auto px-4 py-8">
        {/* 页面标题 */}
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2 flex items-center justify-center">
            <ShoppingCart className="w-8 h-8 text-primary-500 mr-3" />
            购物车
          </h1>
          <p className="text-gray-600">管理您的绘本订单</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 购物车商品列表 */}
          <div className="lg:col-span-2">
            {items.length === 0 ? (
              <EmptyCart />
            ) : (
              <div className="space-y-4">
                {items.map((item) => (
                  <CartItem key={item.id} item={item} />
                ))}
              </div>
            )}
          </div>

          {/* 订单摘要 */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-3xl p-6 shadow-xl sticky top-8">
              <h2 className="text-xl font-bold text-gray-800 mb-6">订单摘要</h2>
              
              <div className="space-y-3 mb-6">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">商品小计</span>
                  <span className="font-medium">¥{subtotal.toFixed(1)}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">运费</span>
                  <span className={cn("font-medium", shipping === 0 && "text-leaf-600")}>
                    {shipping === 0 ? '免运费' : `¥${shipping.toFixed(1)}`}
                  </span>
                </div>
                {subtotal < 99 && (
                  <div className="bg-orange-50 border border-orange-200 rounded-xl p-3 text-xs text-orange-700">
                    💡 再购 ¥{(99 - subtotal).toFixed(1)} 即可免运费
                  </div>
                )}
                <div className="border-t border-gray-200 pt-3">
                  <div className="flex justify-between">
                    <span className="font-bold text-gray-800">总计</span>
                    <span className="font-bold text-xl text-primary-600">¥{total.toFixed(1)}</span>
                  </div>
                </div>
              </div>

              <button 
                disabled={items.length === 0}
                className={cn(
                  "w-full py-3 rounded-2xl font-medium transition-all duration-200",
                  items.length === 0
                    ? "bg-gray-300 text-gray-500 cursor-not-allowed"
                    : "bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:from-primary-600 hover:to-primary-700 shadow-lg hover:shadow-xl"
                )}
              >
                {items.length === 0 ? '购物车为空' : '立即结算'}
              </button>

              <div className="mt-4 text-center">
                <p className="text-xs text-gray-500">
                  支持微信支付、支付宝、银行卡
                </p>
              </div>
            </div>

            {/* 优惠提示 */}
            <div className="bg-white rounded-3xl p-6 shadow-xl mt-6">
              <h3 className="font-bold text-gray-800 mb-4">💰 优惠活动</h3>
              <div className="space-y-3 text-sm">
                <div className="bg-red-50 border border-red-200 rounded-xl p-3">
                  <p className="font-medium text-red-800">🎁 新用户专享</p>
                  <p className="text-red-600">首单立减10元</p>
                </div>
                <div className="bg-primary-50 border border-primary-200 rounded-xl p-3">
                  <p className="font-medium text-primary-800">📚 满额包邮</p>
                  <p className="text-primary-600">满99元免运费</p>
                </div>
                <div className="bg-leaf-50 border border-leaf-200 rounded-xl p-3">
                  <p className="font-medium text-leaf-800">⭐ 会员优惠</p>
                  <p className="text-leaf-600">黄金会员享9.5折</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Cart